import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { CdkPortal, ComponentPortal, ComponentType, TemplatePortal, TemplatePortalDirective } from '@angular/cdk/portal';
import { Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';

import { OverlayPanelComponent } from './overlay-panel.component';

@Component({
  selector: 'app-overlay',
  templateUrl: './overlay.component.html',
  styleUrls: ['./overlay.component.sass'],
  encapsulation: ViewEncapsulation.None,
  preserveWhitespaces: false,
})
export class OverlayComponent implements OnInit {

  constructor(
    public overlay: Overlay,
    public viewContainerRef: ViewContainerRef,
  ) { }

  ngOnInit() { }

  isOpen = false;

  globalOverlayPosition = 40;

  backdropClick() {
    this.isOpen = false;
  }

  /**
   * overlay 在整个屏幕的中间显示
   */
  showOverlayGlobalPanelCenter() {
    // config: OverlayConfig overlay的配置，配置显示位置，和滑动策略
    const config = new OverlayConfig();
    config.positionStrategy = this.overlay.position()
        .global() // 全局显示
        .centerHorizontally() // 水平居中
        .centerVertically(); // 垂直居中
        // 可设置偏移量： .left(`${this.globalOverlayPosition}px`).top(`${this.globalOverlayPosition}px`);
    config.hasBackdrop = true; // 设置overlay后面有一层背景, 当然你也可以设置backdropClass 来设置这层背景的class
    const overlayRef = this.overlay.create(config); // OverlayRef, overlay层
    overlayRef.backdropClick().subscribe(() => {
      // 点击了backdrop背景
      overlayRef.dispose();
    });
    // OverlayPanelComponent是动态组件
    // 创建一个ComponentPortal，attach到OverlayRef，这个时候overlay层就显示出来了。
    overlayRef.attach(new ComponentPortal(OverlayPanelComponent, this.viewContainerRef));
    // 监听overlayRef上的键盘按键事件
    overlayRef.keydownEvents().subscribe((event: KeyboardEvent) => {
        console.log(event);
        if (event.code === 'Escape') { overlayRef.dispose() }
    });
  }

  /**
   * overlay 显示弹窗内容
   */
  // @ViewChild('overlayGlobalTemplate') templateGlobalPortals: TemplatePortal;

  showOverlayModal() {
    // console.log(this.templateGlobalPortals)
    // const config = new OverlayConfig();
    // config.positionStrategy = this.overlay.position()
    //     .global()
    //     .centerHorizontally()
    //     .top(`${this.globalOverlayPosition}px`);

    // const _overlayTemplateRef = this.overlay.create(config);
    // _overlayTemplateRef.attach(this.templateGlobalPortals);
  }

}
